<template>
  <view class="video-player">
    <!-- 视频播放容器 -->
    <video
      :src="videoUrl"
      :poster="videoInfo.cover"
      class="video-core"
      controls
      @play="handlePlay"
      @pause="handlePause"
    ></video>
    
    <!-- 视频信息栏 -->
    <view class="video-info-bar">
      <view class="left-info">
        <text class="video-title">{{ videoInfo.title }}</text>
        <text class="video-meta">
          {{ videoInfo.playCount }}次播放 · {{ videoInfo.duration }}
        </text>
      </view>
      
      <!-- 作者信息 + 关注按钮 -->
      <view class="author-info">
        <image 
          :src="getAuthorAvatar(videoInfo.author)" 
          class="author-avatar"
        ></image>
        <text class="author-name">{{ videoInfo.author }}</text>
        <button 
          class="follow-btn" 
          :class="{ followed: isFollowed }"
          @click.stop="toggleFollow"
        >
          {{ isFollowed ? '已关注' : '关注' }}
        </button>
      </view>
    </view>
    
    <!-- 操作栏（点赞/评论/分享） -->
    <view class="video-actions">
      <view class="action-item" @click.stop="toggleLike">
        <text class="action-icon like-icon" :class="{ liked: isLiked }">❤️</text>
        <text class="action-text">{{ likeCount }}</text>
      </view>
      <view class="action-item" @click.stop="gotoComment">
        <text class="action-icon">💬</text>
        <text class="action-text">{{ commentCount }}</text>
      </view>
      <view class="action-item" @click.stop="shareVideo">
        <text class="action-icon">↗️</text>
        <text class="action-text">分享</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 视频基础信息
    videoInfo: {
      type: Object,
      required: true,
      default: () => ({})
    },
    // 视频播放地址
    videoUrl: {
      type: String,
      default: ''
    },
    // 初始点赞状态
    initLiked: {
      type: Boolean,
      default: false
    },
    // 初始关注状态
    initFollowed: {
      type: Boolean,
      default: false
    },
    // 点赞数
    likeCount: {
      type: [String, Number],
      default: 0
    },
    // 评论数
    commentCount: {
      type: [String, Number],
      default: 0
    }
  },
  data() {
    return {
      isLiked: this.initLiked,
      isFollowed: this.initFollowed,
      app: getApp()
    };
  },
  watch: {
    initLiked(newVal) {
      this.isLiked = newVal;
    },
    initFollowed(newVal) {
      this.isFollowed = newVal;
    }
  },
  methods: {
    // 播放/暂停事件
    handlePlay() {
      this.$emit('play', this.videoInfo.id);
    },
    handlePause() {
      this.$emit('pause', this.videoInfo.id);
    },
    
    // 切换点赞
    toggleLike() {
      if (!this.checkLogin()) return;
      
      this.isLiked = !this.isLiked;
      // 同步到全局
      this.app.toggleVideoLike(this.videoInfo.id, this.isLiked);
      // 触发父组件更新
      this.$emit('like-change', {
        videoId: this.videoInfo.id,
        isLiked: this.isLiked,
        count: this.isLiked 
          ? Number(this.likeCount.replace(/[^\d]/g, '')) + 1 
          : Math.max(0, Number(this.likeCount.replace(/[^\d]/g, '')) - 1)
      });
      uni.showToast({
        title: this.isLiked ? '点赞成功' : '取消点赞',
        icon: 'none'
      });
    },
    
    // 切换关注作者
    toggleFollow() {
      if (!this.checkLogin()) return;
      
      this.isFollowed = !this.isFollowed;
      // 同步到全局
      this.app.toggleVideoAuthorFollow(this.videoInfo.author, this.isFollowed);
      // 触发父组件更新
      this.$emit('follow-change', {
        author: this.videoInfo.author,
        isFollowed: this.isFollowed
      });
      uni.showToast({
        title: this.isFollowed ? '关注成功' : '取消关注',
        icon: 'none'
      });
    },
    
    // 跳转评论
    gotoComment() {
      this.$emit('goto-comment', this.videoInfo.id);
    },
    
    // 分享视频
    shareVideo() {
      uni.showActionSheet({
        itemList: ['分享到微信', '分享到朋友圈', '复制链接'],
        success: (res) => {
          let tip = '';
          switch (res.tapIndex) {
            case 0: tip = '已分享到微信'; break;
            case 1: tip = '已分享到朋友圈'; break;
            case 2: tip = '链接已复制'; break;
          }
          uni.showToast({ title: tip, icon: 'none' });
        }
      });
    },
    
    // 登录校验
    checkLogin() {
      if (!this.app.globalData.userInfo) {
        uni.showModal({
          title: '提示',
          content: '请先登录后操作',
          confirmText: '去登录',
          success: (res) => {
            if (res.confirm) {
              uni.navigateTo({ url: '/pages/tabBar/tabcompage/login/login' });
            }
          }
        });
        return false;
      }
      return true;
    },
    
    // 作者头像（模拟）
    getAuthorAvatar(author) {
      const avatarMap = {
        '醉里挑灯看剑': '/static/avatar1.png',
        'NORA': '/static/avatar2.png',
        '动物大观察': '/static/avatar3.png'
      };
      return avatarMap[author] || '/static/avatar.png';
    }
  }
};
</script>

<style scoped>
.video-player {
  background: #fff;
  border-radius: 15rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
}

/* 视频核心样式 */
.video-core {
  width: 100%;
  height: 400rpx;
}

/* 信息栏 */
.video-info-bar {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.left-info {
  margin-bottom: 10rpx;
}

.video-title {
  font-size: 30rpx;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-meta {
  font-size: 24rpx;
  color: #999;
}

.author-info {
  display: flex;
  align-items: center;
  gap: 15rpx;
}

.author-avatar {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}

.author-name {
  font-size: 26rpx;
  color: #333;
  flex: 1;
}

/* 关注按钮 */
.follow-btn {
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  font-size: 24rpx;
  background: #d00000;
  color: #fff;
  transition: all 0.3s ease;
}

.follow-btn.followed {
  background: #999;
}

.follow-btn:active {
  transform: scale(0.95);
  opacity: 0.8;
}

/* 操作栏 */
.video-actions {
  display: flex;
  justify-content: center;
  gap: 60rpx;
  padding: 15rpx 0;
  border-top: 1rpx solid #f0f0f0;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  padding: 10rpx;
  border-radius: 10rpx;
  transition: all 0.2s ease;
}

.action-item:active {
  background: #f5f5f5;
  transform: scale(0.95);
}

.action-icon {
  font-size: 36rpx;
}

/* 点赞按钮高亮 + 动画 */
.like-icon {
  transition: all 0.3s ease;
}

.like-icon.liked {
  color: #ff4444;
  transform: scale(1.1);
  animation: pulse 0.5s ease;
}

.action-text {
  font-size: 24rpx;
  color: #666;
}

/* 点赞动画 */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1.1); }
}
</style>